{% block sw_product_cross_selling_form %}
<div class="product-detail-cross-selling-form">
    {% block sw_prduct_cross_selling_form_card %}
    <mt-card
        :title="crossSellingTitle"
        position-identifier="sw-product-cross-selling-form"
    >
        <template #headerRight>
            {% block sw_prduct_cross_selling_form_context_menu %}
            <div class="sw-product-detail-cross-selling__context-button">
                <sw-context-button>
                    {% block sw_product_cross_selling_form_context_button_delete %}
                    <sw-context-menu-item
                        variant="danger"
                        class="sw-product-cross_selling-context-item__delete-action"
                        :disabled="!allowEdit"
                        @click="onShowDeleteModal"
                    >
                        {{ $tc('sw-product.crossselling.buttonDeleteCrossSelling') }}
                    </sw-context-menu-item>
                    {% endblock %}
                </sw-context-button>
            </div>
            {% endblock %}
        </template>

        <div
            v-if="!isLoading && crossSelling"
            class="product-detail-cross-selling-form__card-container"
        >
            <sw-container
                columns="2fr 1fr"
                gap="0px 30px"
                align="start"
            >
                {% block sw_prduct_cross_selling_form_title_field %}

                <mt-text-field
                    v-model="crossSelling.name"
                    name="sw-field--crossSelling-name"
                    :label="$tc('sw-product.crossselling.inputCrossSellingTitle')"
                    required
                    :placeholder="placeholder(crossSelling, 'name', $tc('sw-product.crossselling.inputCrossSellingTitlePlaceholder'))"
                    :error="crossSellingNameError"
                    :disabled="!allowEdit"
                />
                {% endblock %}
                {% block sw_prduct_cross_selling_form_active_field %}

                <mt-switch
                    v-model="crossSelling.active"
                    class="sw-product-detail-cross-selling__active-switch"
                    :label="$tc('sw-product.crossselling.inputCrossSellingActive')"
                    :disabled="!allowEdit"
                    name="sw-field--crossSelling-active"
                    bordered
                />
                {% endblock %}
            </sw-container>

            <sw-container
                columns="2fr 1fr"
                gap="0px 30px"
            >
                {% block sw_prduct_cross_selling_form_type %}
                <mt-select
                    v-model="crossSelling.type"
                    :label="$tc('sw-product.crossselling.inputCrossSellingType')"
                    :error="crossSellingTypeError"
                    :disabled="!allowEdit"
                    :options="crossSellingTypeOptions"
                    @update:model-value="onTypeChanged"
                />
                {% endblock %}
                {% block sw_prduct_cross_selling_form_position_field %}
                <mt-number-field
                    v-model="crossSelling.position"
                    number-type="int"
                    :min="1"
                    :label="$tc('sw-product.crossselling.inputCrossSellingPosition')"
                    :error="crossSellingPositionError"
                    :placeholder="$tc('sw-product.crossselling.inputCrossSellingPositionPlaceholder')"
                    :disabled="!allowEdit"
                />
                {% endblock %}
            </sw-container>

            <div v-if="!useManualAssignment">
                {% block sw_prduct_cross_selling_form_product_stream_field %}
                <sw-entity-single-select
                    id="sw-field--crossSelling-product-group"
                    v-model:value="crossSelling.productStreamId"
                    entity="product_stream"
                    class="sw-select-cross-selling__select-product-stream"
                    :label="$tc('sw-product.crossselling.inputCrossSellingProductStream')"
                    :placeholder="$tc('sw-product.crossselling.inputCrossSellingProductStreamPlaceholder')"
                    :disabled="!allowEdit"
                    show-clearable-button
                />
                {% endblock %}

                <sw-container
                    columns="1fr 1fr"
                    gap="0px 30px"
                >
                    {% block sw_prduct_cross_selling_form_sort_field %}
                    <mt-select
                        :label="$tc('sw-product.crossselling.inputCrossSellingSorting')"
                        :model-value="sortingConCat"
                        :disabled="!allowEdit"
                        :options="sortingTypeOptions"
                        @update:model-value="onSortingChanged"
                    />
                    {% endblock %}

                    {% block sw_prduct_cross_selling_form_limit_field %}
                    <mt-number-field
                        v-model="crossSelling.limit"
                        number-type="int"
                        :label="$tc('sw-product.crossselling.inputCrossSellingLimit')"
                        :disabled="!allowEdit"
                    />
                    {% endblock %}
                </sw-container>

                {% block sw_prduct_cross_selling_form_preview_link %}
                <sw-container
                    columns="1fr"
                    justify="end"
                    class="sw-product-cross-selling-form__links"
                >
                    <a
                        class="sw-card__quick-link"
                        :class="{ 'is--disabled': previewDisabled }"
                        role="button"
                        tabindex="0"
                        @click="openModalPreview"
                        @keydown.enter="openModalPreview"
                    >
                        {{ $tc('sw-product.crossselling.linkOpenStreamPreview') }}
                        <mt-icon
                            name="regular-long-arrow-right"
                            size="16px"
                        />
                    </a>
                </sw-container>
                {% endblock %}
            </div>

            {% block sw_product_detail_cross_selling_assignment %}
            <sw-product-cross-selling-assignment
                v-else
                :assigned-products="crossSelling.assignedProducts"
                :cross-selling-id="crossSelling.id"
                :searchable-fields="['name', 'productNumber']"
                :allow-edit="allowEdit"
            />
            {% endblock %}

            {% block sw_product_detail_cross_selling_modal_preview_modal %}
            <sw-product-stream-modal-preview
                v-if="showModalPreview"
                ref="modalPreview"
                :filters="productStreamFilterTree"
                @modal-close="closeModalPreview"
            />
            {% endblock %}
        </div>
    </mt-card>
    {% endblock %}

    {% block sw_product_detail_cross_selling_form_modal_delete %}
    <sw-modal
        v-if="showDeleteModal"
        variant="small"
        :title="$tc('sw-product.crossselling.deleteConfirmTitle')"
        class="sw-product-detail-cross-selling__delete-modal"
        @modal-close="onCloseDeleteModal"
    >
        {% block sw_product_detail_cross_selling_form_delete_text %}
        <p>
            {{ $tc('sw-product.crossselling.deleteConfirmText') }}
        </p>
        {% endblock %}

        {% block sw_product_detail_cross_selling_form_modal_delete_footer %}
        <template #modal-footer>
            {% block sw_product_detail_cross_selling_modal_delete_action_cancel %}
            <mt-button
                size="small"
                variant="secondary"
                @click="onCloseDeleteModal"
            >
                {{ $tc('global.default.cancel') }}
            </mt-button>
            {% endblock %}

            {% block sw_product_detail_cross_selling_form_modal_delete_action_delete %}
            <mt-button
                class="sw-product-detail-cross-selling__delete-button"
                size="small"
                variant="critical"
                @click="onConfirmDelete"
            >
                {{ $tc('sw-product.crossselling.deleteButtonDelete') }}
            </mt-button>
            {% endblock %}
        </template>
        {% endblock %}
    </sw-modal>
    {% endblock %}

    {% block sw_product_cross_selling_form_condition_tree_invisibly %}
    <sw-condition-tree
        v-if="productStreamFilterRepository"
        v-show="false"
        association-field="productStreamId"
        child-association-field="queries"
        :initial-conditions="productStreamFilter"
        :condition-repository="productStreamFilterRepository"
        :condition-data-provider-service="productStreamConditionService"
        :association-value="associationValue"
        :root-condition="null"
        @conditions-changed="updateProductStreamFilterTree"
    />
    {% endblock %}
</div>
{% endblock %}
